<template>
  <div class="form-actions">
    <el-button v-if="canSaveDraft" type="info" @click="onSaveDraft" :loading="savingDraft">
      暂存
    </el-button>
    <el-button type="primary" @click="onSubmit" :loading="submitting">
      <el-icon><Check /></el-icon> {{ submitButtonText }}
    </el-button>
    <el-button @click="onCancel">
      <el-icon><Close /></el-icon> 取消
    </el-button>
  </div>
</template>

<script>
import { Check, Close } from '@element-plus/icons-vue';

export default {
  name: 'SummaryActionButtons',
  components: {
    Check,
    Close
  },
  props: {
    canSaveDraft: {
      type: Boolean,
      default: false
    },
    savingDraft: {
      type: Boolean,
      default: false
    },
    submitting: {
      type: Boolean,
      default: false
    },
    submitButtonText: {
      type: String,
      default: '提交'
    }
  },
  emits: ['saveDraft', 'submit', 'cancel'],
  setup(props, { emit }) {
    const onSaveDraft = () => {
      emit('saveDraft');
    };

    const onSubmit = () => {
      emit('submit');
    };

    const onCancel = () => {
      emit('cancel');
    };

    return {
      onSaveDraft,
      onSubmit,
      onCancel
    };
  }
};
</script>

<style scoped>
.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.form-actions button {
  min-width: 120px;
  margin: 0 10px;
}
</style>